<!DOCTYPE html>
<html>
<head>
    <!-- strictly for styling and demo purposes -->
    <link rel="stylesheet" href="assets/foundation.min.css">
    <link rel="stylesheet" href="assets/style.css">

    <script src="assets/jquery-1.9.1.min.js"></script>
    <link href="assets/prettify.css" rel="stylesheet" type="text/css" />
    <script src="assets/prettify.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("pre", this).addClass("prettyprint");
        });
    </script>
    <!-- end unnecessary files for demo -->

    <script src="../components/angular/angular.min.js"></script>
    <script src="../components/angular-cookies/angular-cookies.min.js"></script>
    <script src="../src/angularLocalStorage.js"></script>
    <script>
        var eS = angular.module('exampleStore', ['angularLocalStorage']);

        eS.controller('MainCtrl', ['$scope', 'storage', function ( $scope, storage ) {
            storage.bind($scope, 'test', 'Some Default Text');

            $scope.clearTest = function () {
                storage.remove('test');
            };
        }]);
    </script>
</head>
<body>
<div ng-app="exampleStore">
    <div ng-controller="MainCtrl">
        <div class="hero">
            <h1>the simplest localStorage implementation, <b>ever</b></h1>
            <h3>angular localStorage module</h3>
        </div>
        <div class="row">
            <div class="large-12 columns">
                <h2>How to use localStorage module</h2>
            </div>
        </div>
        <div class="row">
            <div class="large-4 columns">
                <p>Variable: <b>{{test}}</b></p>
                <label>localStorage variable value:</label> <input type="text" ng-model="test">
                <a ng-click="clearTest()">Clear Value from LC</a>

                <p style="font-size: 12px;"><i>Change the value in the textbox and refresh the page!</i></p>
            </div>
            <div class="large-8 columns">
                <pre>
var eS = angular.module('exampleStore', ['angularLocalStorage']);

eS.controller('MainCtrl', ['$scope', 'storage', function ( $scope, storage ) {
    storage.bind($scope, 'test', 'Some Default Text');

    $scope.clearTest = function () {
        storage.remove('test');
    };
}]);
                </pre>
            </div>
        </div>

    </div>
</div>
</body>
</html>